import Taro from "@tarojs/taro";
import { View, Text } from "@tarojs/components";
import "./box.scss";
import { EProgramType, IItem } from "./config";

interface IBox {
  item: IItem;
}

export const ShowMessageBox = (props: IBox) => {
  const { item } = props;

  const t = item && item.programIntro ? item.programIntro : ''

  return (
    <View className="show-message"

    >
      <View className='line number bold'>【{item.programNo}】</View>
      <View className='line title bold'>{EProgramType[item.programType]} {item.programName}</View>
      <View className='line display'>
        <Text className='bold at-col at-col-4'>演出团体：</Text>
        <Text className=''>{item.company}</Text>
      </View>
      <View className='line display at-row'>
        <Text className='bold at-col at-col-4'>项目简介：</Text>
        <View className='over' style={{
          // WebkitBoxOrient: 'vertical'
        }}>
          {
            t.length > 12 ? <View>
              {t.substring(0, 12)}...
              <Text className='detail'
                onClick={() => {
                  Taro.showModal({
                    title: '详情',
                    content: t,
                    success: function (res) {
                      if (res.confirm) {
                        console.log('用户点击确定')
                      } else if (res.cancel) {
                        console.log('用户点击取消')
                      }
                    }
                  })
                }}
              >【详情】</Text>
            </View> : t
          }
        </View>
        {/* */}
      </View>
    </View>
  );
};
